<template>
	<view class="body">
		<image :src="$IMG_URL('/static/ck/face.png')" mode="aspectFit" class="face" @click="change"></image>
		<view class="title">
			人脸照片
		</view>
		<view class="size"  v-if="!show">
			<text>请上传正脸清晰的生活照，适用格式：JPG、PNG，</text>
			<text>图片必须大于50KB</text>
		</view>
		<view class="size" v-else>
			<text>温馨提示:如有开门不便请先联系店长，谢谢。</text>
		</view>
		<view class="bottom" v-if="!show">
			<view class="rows">
				<view class="left">
					录人脸注意事项
				</view>
				<view class="btn" @click="popupVisible = true">
					查看示例
				</view>
			</view>
			<view class="comlun">
				<text>1、清晰露出五官，不戴眼镜，不美颜</text>
				<text>2、正脸拍摄(禁止俯拍/仰拍)</text>
				<text>3、纯色背景，光线良好</text>
			</view>
		</view>
		<ImagePopup :visible="popupVisible" @close="closePopup">
			<view class="slot-box">
				<image :src="$IMG_URL('/static/ck/demo.png')" mode="widthFix" style="width: 628rpx;" @click="closePopup"></image>
			</view>
		</ImagePopup>
	</view>
</template>

<script>
	import ImagePopup from '@/pages/index/components/ImagePopup.vue'
	export default{
		components: {
			ImagePopup,
		},
		data(){
			return{
				show:false,
				popupVisible: false, // 控制弹窗显示
			}
		},
		methods:{
			change(){
				this.show = !this.show
			},
			closePopup() {
				this.popupVisible = false;
			},
			// 处理按钮点击
			handleBtnClick() {
				// 保存关闭状态到本地缓存
				uni.setStorageSync('popupClosed', true);
				this.closePopup(); // 关闭弹窗
			},
		}
	}
</script>

<style lang="scss">
	page{
		
	}
	.body{
		display: flex;
		flex-direction: column;
		align-items: center;
		.face{
			margin-top: 48rpx;
			width: 204rpx;
			height: 204rpx;
		}
		.title{
			margin-top: 24rpx;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-Heavy;
			font-weight: 800;
			text-align: center;
			color: #000000;
		}
		.size{
			margin-top: 24rpx;
			width: 644rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #000000;
		}
		.bottom{
			margin-top: 38rpx;
			width: 700rpx;
			border-top: 1rpx solid #e9e9e9;
			padding: 50rpx 23rpx 0 ;
			.rows{
				display: flex;
				flex-direction: row;
				align-items: center;
				.left{
					flex:1;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #000000;
				}
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 152rpx;
					height: 60rpx;
					border: 1rpx solid #73F0EA;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: center;
					color: #73F0EA;
				}
			}
			.comlun{
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #000000;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>